﻿///<reference path="./FlowView.ts"/>
///<reference path="./PointView.ts"/>
namespace Flow.views
{
    export class PathView
    {
        public endPion: Point;
        public startPion: Point;
        public fill: string='none';
        private pstr: string;
        public stroke: string ='#88817f';
        public opacity: string;
        public strokeWidth: string ='5';
        private path: SVGPathElement;
        private background: SVGSVGElement;
        private vector;

        constructor(background: SVGSVGElement)
        {
            this.background = background;
            this.path = document.createElementNS("http://www.w3.org/2000/svg", "path");
            this.background.appendChild(this.path);
        }

        initPath(startPion: Point, endPion: Point)
        {
            this.endPion = endPion;
            this.startPion = startPion;
            //this.path.setAttribute("opacity", "0.5");
            this.path.setAttribute("stroke-width", "5");
            this.path.setAttribute("stroke", "#88817f");
            this.path.setAttribute("fill", "none");

            this.updateVector();

            this.pstr = "m " + this.startPion.getLinkX() + "," + this.startPion.getlinkY() + " ";//左
            this.pstr += "c " + this.vector + "," + 0 + " ";//左控制点
            this.pstr += (this.endPion.getLinkX() - this.startPion.getLinkX() - this.vector) + "," + (this.endPion.getlinkY() - this.startPion.getlinkY()) + " ";//右控制点   
            this.pstr += (this.endPion.getLinkX() - this.startPion.getLinkX()) + "," + (this.endPion.getlinkY() - this.startPion.getlinkY()) + " ";//右
            this.path.setAttribute("d", this.pstr);
            
        }

        update()
        {
            this.updateVector();

            this.pstr = "m " + this.startPion.getLinkX() + "," + this.startPion.getlinkY() + " ";//左
            this.pstr += "c " + this.vector + "," + 0 + " ";//左控制点
            this.pstr += (this.endPion.getLinkX() - this.startPion.getLinkX() - this.vector) + "," + (this.endPion.getlinkY() - this.startPion.getlinkY()) + " ";//右控制点   
            this.pstr += (this.endPion.getLinkX() - this.startPion.getLinkX()) + "," + (this.endPion.getlinkY() - this.startPion.getlinkY()) + " ";//右
            this.path.setAttribute("d", this.pstr);

            //this.path.setAttribute("opacity", this.opacity);
            this.path.setAttribute("stroke-width", this.strokeWidth);
            this.path.setAttribute("stroke", this.stroke);
            this.path.setAttribute("fill", this.fill);
        }

        setEndPion(end: Point)
        {

        }

        updateVector() {
            this.vector = (this.endPion.getLinkX() - this.startPion.getLinkX()) / 2;
            if (this.vector < 0) {
                this.vector = -this.vector;
            }
            this.vector += Math.abs(this.endPion.getlinkY() - this.startPion.getlinkY()) / 2;
        }
    }
    
}